<template>
  <v-dialog v-model="dialog.visible" persistent max-width="768">
    <v-card>
      <v-card-title class="headline">{{dialog.title}}</v-card-title>
      <v-card-text>
        <v-container class="pb-0" grid-list-md>
          <v-form ref="form" v-model="valid" lazy-validation>
            <v-layout wrap align-center>
              <v-flex xs12>
                <v-select :items="consultType" label="解答类型" item-text="name" item-value="id" v-model="dialog.data.consultType" search-input></v-select>
              </v-flex>
              <v-flex xs12>
                <v-textarea label="问题" :rules="rule.question" v-model="dialog.data.question" auto-grow :rows="1"></v-textarea>
              </v-flex>
              <v-flex xs12>
                <v-textarea label="解答" :rules="rule.answer" v-model="dialog.data.answer" auto-grow :rows="1"></v-textarea>
              </v-flex>
            </v-layout>
          </v-form>
        </v-container>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="green darken-1" flat @click="dialog.visible=false">关闭</v-btn>
        <v-btn color="green darken-1" flat @click="checkForm">保存</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import { putConsultAnswer, postConsultAnswer } from '../../api/consult'
export default {
  name: 'QuestionDialog',
  data: () => ({
    dialog: {
      visible: false,
      title: '',
      data: {
        consultType: 0,
        question: '',
        answer: ''
      }
    },
    rule: {
      question: [v => !!v || '问题必须填写', v => (v && v.length <= 255) || '问题必须小于255个字符'],
      answer: [v => !!v || '解答必须填写', v => (v && v.length <= 255) || '解答必须小于255个字符']
    },
    consultType: [{ id: 0, name: '身体形态' }, { id: 1, name: '身体机能' }, { id: 2, name: '身体素质' }, { id: 3, name: '拓展测试' }],
    valid: true
  }),
  methods: {
    show (title) {
      this.dialog.title = title
      this.dialog.visible = true
    },
    clear () {
      this.dialog.data = {
        id: '',
        consultType: 0,
        question: '',
        answer: ''
      }
    },
    get (data) {
      this.dialog.data.id = data.id
      this.dialog.data.question = data.question
      this.dialog.data.answer = data.answer
      this.dialog.data.consultType = data.consultType
    },
    checkForm () {
      if (this.$refs.form.validate()) {
        if (this.dialog.data.id === '') {
          let data = {
            question: this.dialog.data.question,
            answer: this.dialog.data.answer,
            consultType: this.dialog.data.consultType
          }
          putConsultAnswer(data).then((res) => {
            this.dialog.visible = false
            this.$emit('update')
          })
        } else {
          let data = {
            id: this.dialog.data.id,
            question: this.dialog.data.question,
            answer: this.dialog.data.answer,
            consultType: this.dialog.data.consultType
          }
          postConsultAnswer(data).then((res) => {
            this.dialog.visible = false
            this.$emit('update')
          })
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
